<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="申请提现"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="explain">
      <span>提现说明</span>
      <div>1.提现暂不收取手续费</div>
      <div>2.本平台未设置提现金额限制，但需遵循支付通道限制</div>
      <div>3.微信单笔最低0.3元，单笔最高5000元</div>
      <!-- <div>4.支付宝提现限额最高5万元</div> -->
    </div>
    <div class="number">
      <span>提现金额</span>
      <van-field
        v-model="number"
        left-icon="gold-coin"
        type="number"
        placeholder="请输入提现金额"
      />
      <div class="showN">
        当前可提现余额<span>{{ withdrawAmount }}</span
        >元
        <span @click="number = withdrawAmount">全部提现</span>
      </div>
    </div>
    <div class="way">
      <span>提现方式</span>
      <div class="part1">
        <div style="flex: 1">
          <div class="part3">
            <van-icon size="40px" name="wechat-pay" />
            <div>
              <div>微信</div>
            </div>
          </div>
          <div class="part4">
            <img src="@/assets/ok.png" alt="" width="26px" height="26px" />
          </div>
          <!-- <div class="part3">
            <van-icon size="40px" name="alipay" />
            <div>支付宝</div>
          </div> -->
        </div>
        <!-- <van-radio-group v-model="radio">
          <van-radio
            icon-size="24px"
            checked-color="#D43B33"
            name="1"
          ></van-radio>
          <van-radio
            icon-size="24px"
            checked-color="#D43B33"
            name="2"
          ></van-radio>
        </van-radio-group> -->
      </div>
    </div>
    <div class="tipw">预计1-2个工作日处理，周末及节假日顺延</div>
    <div class="btn">
      <van-button type="info" @click="jump">确认提现</van-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getMoney } from "@/apis/user";

export default {
  data() {
    return {
      number: "",
      show: true,
      show1: false,
    };
  },
  created() {
    const _this = this;
  },
  methods: {
    jump() {
      const _this = this;
      if (_this.number == "") {
        _this.$toast("提现金额不能为空");
      } else if (_this.number == 0) {
        _this.$toast("提现金额不能为0");
      } else if (_this.number < 0.3) {
        _this.$toast("提现金额不能少于0.3");
      } else if (_this.number > _this.withdrawAmount) {
        _this.$toast("提现金额不能多于钱包余额");
      } else {
        getMoney({ money: _this.number }).then((res) => {
          console.log(res);
          if (res.code == 201 || res.code == 200) {
            _this.$router.push("/wdsuccess");
          } else {
            _this.$toast("提现失败");
          }
        });
      }
    },
    back() {
      this.$router.go(-1);
    },
  },
  computed: {
    ...mapGetters(["withdrawAmount"]),
  },
};
</script>

<style lang="less" scoped>
.zhe {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.explain {
  padding: 20px 15px;
  background-color: #45b7cb13;
  span {
    font-size: 16px;
    font-weight: bold;
  }
  div {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
  }
}
.number {
  padding: 20px 15px;
  span {
    font-size: 16px;
    font-weight: bold;
  }
  .van-field {
    margin-top: 10px;
    font-size: 18px;
    padding-left: 0px;
    border-bottom: 1px solid #ddd;
  }
  .showN {
    margin-top: 10px;
    color: #999;
    span {
      &:last-child {
        float: right;
        color: #d43b33;
      }
    }
  }
}
.way {
  margin: 0 15px;
  & > span {
    font-size: 18px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .part1 {
    display: flex;
    & > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
    .part4 {
      span {
        font-size: 15px;
      }
      span:first-child {
        color: #666;
      }
      span:last-child {
        margin-left: 10px;
        color: #333;
      }
    }
    .part3 {
      display: flex;
      align-items: center;
      &:first-child {
        .van-icon {
          color: #00cc00 !important;
        }
      }
      &:last-child {
        .van-icon {
          color: #2c97fa;
        }
      }
      & > div {
        div {
          font-size: 15px;
          margin-left: 5px;
        }
        div:first-child {
          margin-bottom: 5px;
          font-weight: bold;
        }
        div:last-child {
          color: #666;
        }
      }
      // div {
      //   padding-top: 10px;
      //   margin-left: 10px;
      // }
    }
    // .van-radio-group {
    //   display: flex;
    //   flex-direction: column;
    //   justify-content: space-around;
    // }
  }
}
.tipw {
  margin-top: 60px;
  text-align: center;
  color: #999;
  font-size: 14px;
}
.btn {
  margin: 0 15px;
  .van-button {
    width: 92vw;
    background-image: linear-gradient(to bottom right, #92d7e6, #45b7cb);
    border: none;
    border-radius: 22.5px;
    font-size: 16px;
    position: absolute;
    bottom: 25px;
  }
}
</style>